<template>
    <li class="diet" :class="liClass">
         <div class="progress" 
                    v-if="status == 'wait' || status == 'eat'"
                    :class="progressClass"
                    :style="countWidth"
                >
        </div>
        <p>{{ names.get(dietInfo[0]) }}</p>
    </li>
</template>

<script>
    export default {
        name: 'diet',
        props:{
            dietInfo:Array,
            names:Map,
            times:Map,
            eatTime:Number,
            orderTime:Number,
            curTime:Number
        },
        computed:{
            status(){
                if(this.dietInfo[1] == 0){
                    return 'wait'
                }

                if(this.dietInfo[1] == 1){
                    return 'eat'
                }

                if(this.dietInfo[1] == 2){
                    return 'finished'
                }

                if(this.dietInfo[1] == 3){
                    return 'outDate'
                }

                return ""
                
            },
            liClass(){
                return{
                    eat: this.status == 'eat',
                    wait: this.status == 'wait',
                    outDateLi: this.status == 'outDate',
                    finished: this.status == 'finished'
                }
            },
            progressClass(){
                return{
                    eaten: this.status == 'eat',
                    waited: this.status == 'wait'
                }
            },
            countWidth(){
                let time = this.times.get(this.dietInfo[0])

                if(this.status == 'eat'){
                    let val = (this.curTime - this.orderTime)*100 / time
                    return {
                        width: `${val >= 100? 100:val}%`
                    }
                }

                if(this.status == 'wait'){
                    let val = (this.curTime - this.orderTime)*100 / (time*1.5)
                    return {
                        width: `${val>=100? 100 : val}%`
                    }
                }

                return {}
            }
        }
    }
</script>

<style scoped>
    .diet{
        position: relative;
        margin-bottom: 10px;
        border: 8px solid #fff;
        font-size: 22px;
        font-weight: 800;
        color: #fff;
        text-align: center;
    }

    .progress{
        position: absolute;
        top: 0;
        bottom: 0;
    }

    .diet>p{
        position: relative;
        z-index: 2;
    }

    .wait{
        background-color: #ff2626;
    }

    .eat{
        background-color: #ff9122;
    }

    .outDateLi{
        background-color: #535362;
        text-decoration: line-through;
    }

    .eaten{
        background-color: #d96d00;
    }

    .waited{
        background-color: #b20000;
    }

    .finished{
        background-color: #00b200;
    }
</style>